<template>
  <div class="container">
    <div class="wrapper">
      <div class="circle3">
        <div class="circle2">
          <div class="circle1">
            <div class="circle0"></div>
          </div>
        </div>
      </div>
    </div>
    正在搜索可用设备...

    <hr />
    <h1>全局键盘监听事件</h1>
    <h1>-todo- juejin（基础知识篇）=> 前端知识体系导图 => Css 基础</h1>
    <h1>-todo- html5 plus</h1>
    <!-- <div v-test="testValue" @click="testValue += 'h'">{{ testValue }}</div> -->
    <div style="">
      <el-input
        v-model="jianxiuyuanyin"
        size="small"
        clearable
        autosize
        resize="none"
        maxlength="200"
        style="width: 400px"
        ref="guzhangjianxiu"
        @input="inputHandler"
        @keyup.enter.native="deviceEnterHandler"
      ></el-input>
    </div>
    <!-- <el-dialog title="提示" :visible.sync="flag[0]" width="30%">
      故障检修原因： -->
    <!-- <el-input
        v-model="jianxiuyuanyin"
        placeholder="请扫描设备码"
        size="small"
        clearable
        style="width: 200px;"
      ></el-input> -->
    <!-- </el-dialog> -->

    <!-- <div style="width: 400px;">
      <el-carousel height="150px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div> -->
  </div>
</template>

<script>
// var obj = {
//   name: 2,
// };
// Object.defineProperty(obj, "name", {
//   get() {
//     console.log("get访问了obj.name属性");
//   },
//   set() {
//     console.log("set");
//   },
// });
// console.log(1);
// setTimeout(() => {
//   console.log(obj.name);
//   obj.name = 3;
// }, 1000);
export default {
  name: "vedio",
  data() {
    return {
      testValue: "这是testvalue",
      hhh: "hhh",
      flag: [true],
      jianxiuyuanyin: "",
      inputFlag: false,
      enterBeginTime: "",
    };
  },
  // directives: {
  //   test: {
  //     bind(el, binds, vnodeoldVnode) {
  //       console.log(el, binds, vnodeoldVnode);
  //     },
  //     // 指令的定义
  //     inserted: function (el, binds, vnode, oldVnode) {
  //       console.log(el, binds, vnode, oldVnode, "inserted");
  //     },
  //     update(el, binds, vnode, oldVnode) {
  //       console.log(el, binds, vnode, oldVnode, "update");
  //     },
  //   },
  // },
  created() {
    // 这里可以调用5+ API了，为了更好的兼容性，应该使用以下代码进行判断
    // if (window.plus) {
    //   // 在这里调用5+ API
    //   this.plusReady();
    // } else {
    //   // 兼容老版本的plusready事件
    //   document.addEventListener("plusready", this.plusReady(), false);
    // }
    function str2ab(str) {
      console.log("str", str);
      new Uint8Array(
        str.match(/[\da-f]{2}/gi).map(function (h) {
          return parseInt(h, 16);
        })
      ).buffer;
    }
    console.log(buf2str(str2ab({ a: 1 })));
    function buf2str(buffer) {
      let encodedString = String.fromCodePoint.apply(
        null,
        new Uint8Array(buffer)
      );
      let decodedString = decodeURIComponent(escape(encodedString));
      //没有这一步中文会乱码
      return decodedString;
    }
  },
  methods: {
    inputHandler(e) {
      console.log(111, e);
      // TODO 扫码枪中文输入法不能用
      // 从input事件中 使用防抖来调请求加一层判断条件筛选掉close等 然后放弃回车事件

      /* 需求：在此页面即可通过window监听键盘输入事件，不用非在输入框之内，然后监听键盘输入事件可以重复监听
      解决:
        时延判断：剔除功能键 据时延条件拼接键盘监听事件所得的文本，然后满足条件的跳转等操作
      */

      // this.enterBeginTime = new Date().getTime()
      // console.log("输入事件", this.jianxiuyuanyin);
      // if (
      //   this.jianxiuyuanyin == "close" ||
      //   this.jianxiuyuanyin == "open" ||
      //   this.jianxiuyuanyin == "data" ||
      //   this.jianxiuyuanyin == ""
      // ) {
      //   this.inputFlag = true;
      //   this.jianxiuyuanyin = ""
      //   console.log('jkkj')
      // } else {
      //   this.inputFlag = false;
      //   // if(new Date().getTime() - this.enterBeginTime > 10) {
      //   //   console.log("调用回车事件");
      //   // }
      // }
    },
    deviceEnterHandler() {
      console.log("进入回车flag", this.inputFlag);
      if (this.inputFlag) {
        return;
      }
      console.log("进入回车", this.jianxiuyuanyin);
    },
    // plusReady() {
    //   console.log(window.plus);
    //   // 在这里调用plus api
    //   plus.device.getInfo({
    //     success: function (e) {
    //       alert("getDeviceInfo success");
    //     },
    //     fail: function (e) {
    //       alert("getDeviceInfo failed");
    //     },
    //   });
    // },
  },
};
</script>

<style>
.wrapper {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(79, 133, 255, 1);
}
.circle0 {
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background-color: rgba(255,255,255, 0.6);
  box-direction: 1px solid green;
  display: flex;
}
.circle1 {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background-color: rgba(255,255,255, 0.4);
  box-direction: 1px solid green;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle2 {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: rgba(255,255,255, 0.2);
  box-direction: 1px solid green;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle3 {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: rgba(255,255,255, 0.1);
  box-direction: 1px solid green;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: circle 2s linear infinite;
}
@keyframes circle {
  from {
    width: 160px;
    height: 160px;
    opacity: 1;
  }
  to {
    width: 220px;
    height: 220px;
    opacity: 0.1;
  }
}
</style>
